import React from 'react';
import { Radio } from 'antd';
import PropTypes from 'prop-types';
import css from './index.less';
const RadioGroup = Radio.Group;

export default class Radios extends React.Component {
  static propTypes = {
    label: PropTypes.any,
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    value: PropTypes.any,
    options: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.any,
      value: PropTypes.any
    })),
  };

  static defaultProps = {
    onChange: () => {},
    label: '单项选择',
    disabled: false,
    value: 1,
    options: [
      {
        label: 'A',
        value: 1
      },
      {
        label: 'B',
        value: 2
      }
    ]
  };

  render() {
    const { onChange, value, options, label } = this.props;
    return (
      <div className={css.wrap}>
        <div className={css.label}>
          &bull; {label}
        </div>
        <div className={css.list}>
          <RadioGroup onChange={(e) => {
            onChange(e.target.value);
          }} value={value}>
            {
              options.map((item, index) => {
                return (
                  <Radio value={item.value} key={index}>{item.label}</Radio>
                );
              })
            }
          </RadioGroup>
        </div>
      </div>
    );
  }
}
